
<script setup>
//第一种函数式传参
// const handle = (e) =>  {
//   uni.navigateTo({
//     url:`./chatOne/chatOne?fromId=${e.target.id}&userName=${e.target.innerText}`,
//     fail:(fail)=>{console.error(fail)},
//   })
// }

import {  onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '../../stores/modules/user';
import { getBothChatListApi } from '../../api/chat';
const userStore = useUserStore()

//获取所有用户
import { computed, ref } from 'vue';
import { getUserListApi } from "../../api/user"

const userList = ref([])
const getUserListData = async () => {
  const res = await getUserListApi()
  userList.value = res.data
}
//获取双方用户聊天记录
// const BothChatList = ref([])
// const message = ref()
// const getBothChatList = async () => {
//   // for(item of userList.value){
//   //   console.log(item);
//   const res = await getBothChatListApi(userStore.userInfo.id,1)
//   BothChatList.value = res.data
//   // console.log(BothChatList.value[BothChatList.value.length - 1].message);
//   message.value = BothChatList.value[BothChatList.value.length - 1].message
//   // console.log(message.value);
// }

// const arrayList = ref([])
// arrayList.value = computed(() => {
//   return userList.value.filter(item => item.id)
// })
// console.log(arrayList.value[1]);
// const getBothChatList = async () => {
//   for(let i = 1; i <= userList.value.length; i++){
//     console.log(i);
//     const res = await getBothChatListApi(userStore.userInfo.id,+i)
//     BothChatList.value = res.data
//     console.log(BothChatList.value[BothChatList.value.length - 1].message);
//     message.value = BothChatList.value[BothChatList.value.length - 1].message
//     arrayList.value.push(message.value)
//   }
//   console.log(arrayList.value);
// }


onShow(() => {
  Promise.all([getUserListData()]) 
})
// uni.setTabBarBadge({
//   index: 1,
//   text: '2',
// })
//不渲染文件传输助手
// const noshowSelf = computed(() => {
//   return userList.value.filter(item => +item.id !== userStore.userInfo.id)
// })



</script>

<template>
    <!-- <ul @tap="handle" class="box" v-for="item in noshowSelf" :key="item.id">
    <li :id="item.id"><image :src="item.avatar" class="avatar"/><p class="text">{{item.username}}<p>adawdawdadw</p></p></li>
    </ul> -->
  <div class="selectBox">
    <input class="select" type="text" placeholder="HotCat chat">
    <uni-icons type="trash" size="30"></uni-icons>
  </div>
  <navigator
    v-for="item in userList"
    :key="item.id"
    :url="`/pages/chat/chatOne/chatOne?fromId=${item.id}&userName=${item.username}`"
    hover-class="none"
  >
  <view class="box" v-if="item.id !== userStore.userInfo.id">
    <image  :src="item.avatar" class="avatar"/>
    <div class="avatarDot"></div>
  <p class="text">{{item.username}}<p>awdawdawd</p></p>
    <p class="time">10:20</p>
    <div class="messageCount">2</div>
  </view>
  <view class="box" v-else>
    <image  src="../../static/file.png" class="avatar"/>
  <p class="text">文件传输助手<p>awdawdawd</p></p>
  <p class="time">10:20</p>
   <div class="messageCount">2</div>
  </view>
  </navigator>
</template>

<style scoped lang="less">
.selectBox{
  display: flex;
  width: 100%;
  .select{
    height: 8vw;
    width: 100%;
    padding-left: 15px;
  }
}


/* #ifdef H5 */
  .text{
    font-size: 1rem;
  }
/* #endif */
/* #ifdef MP-WEIXIN */
.box .text{
  margin-left: 5px;
  margin-top: 10px;
  font-size: 1rem;
}
/* #endif */
.box{
  position: relative;
  margin-left: 10px;
  height: 20vw;
  display: flex;
  align-items: center;
  .avatar{
    width: 3.2rem;
		height: 3.2rem;
    border-radius: 50%;
    margin: 5px;
  }
  .time{
    position: absolute;
    right: 0;
    top: 1rem;
    color: #a3a3a3;
  }
  .messageCount{
    position: absolute;
    right: 0.5rem;
    top: 2.5rem;
    background-color: yellow;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    text-align: center 
  }
  /*用户在线时#9cd467,下线时#d0d0d2*/
  .avatarDot{
    position: absolute;
    left: 2.5rem;
    top: 3.3rem;
    background-color: #9cd467;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
  }
}

</style>